<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-09 15:47:05
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-03-14 15:02:51
 * @FilePath: \jzjy\src\views\ResourceCenter\resDetails.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 资源详情页 -->
  <div id="container">
    <div class="top">
      <div class="bread">
        <span>当前位置：</span>
        <el-breadcrumb separator=">">
         <el-breadcrumb-item :to="{ path: routeurl }">{{routeNmae}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="content">
      <div class="top">
        <span></span>
        <h2>{{title}}</h2>
      </div>
      <div class="tableHeade">
        <h3 class="paixu">排序</h3>
        <h3 class="zyname">资源名称</h3>
        <h3 class="upTime">更新时间</h3>
        <h3 class="doSome">操作</h3>
      </div>
      <div
        class="tableList"
        v-for="(item, index) in kejianList"
        :key="item.id"
        @click="choseList(item.id)"
        :class="{
          choseit: choseN == item.id,
        }"
      >
        <div class="paixu">{{ index + 1 }}</div>
        <div class="zyname" @click="goresDetails(item.id)">
          <img src="../../assets/img/ffzyb/vip.png" v-show="item.is_sf == 1">
          {{ item.title }}
        </div>
        <div class="upTime">
          {{ timeStamp2String(item.update_time * 1000, 8) }}
        </div>
        <div class="doSome">
          <span @click="yulan(item.id)">查看预览</span>
          <span
            @click="downLoad(item.id,item.is_sf,item.is_pay,item.type_id,item)"
            :class="{ haveDw: downN.indexOf(item.id) > -1 }"
            >下载课件</span
          >
        </div>
      </div>
      <!-- 课件查看预览 -->
      <div class="yulan">
        <el-dialog :visible.sync="dialogVisible" width="960px">
          <div class="picList" v-if="!yulanNothingShow">
            <div class="pic" v-for="item in yulanLists" :key="item.id">
              <img :src="item.file_url" alt="" />
            </div>
          </div>
          <div class="nothing" v-if="yulanNothingShow">
            <img src="../../assets/img/nothing.png" alt="" />
          </div>
        </el-dialog>
      </div>
      <!-- 分页部分 -->
      <div class="page1" v-if="kejianList.length > 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          background
          :page-sizes="[10, 20, 30]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
      <div class="nothing" v-if="nothingShow">
        <img src="../../assets/img/nothing.png" alt="" />
      </div>
    </div>
    <!-- 限制下载条数的弹窗 -->
    <fwbtj
      v-if="fwbtjShow"
      :choseGoodId="choseGoodId"
      :goods_lists="goods_lists"
      :caclose="true"
      @zixun ="zixun"
      @choseGood ="choseGood"
      @goyuyue="goyuyue"
      @closefwbtj ="closefwbtj"
    ></fwbtj>
    <!-- 问题咨询加客服弹窗 -->
    <wtzxTc
      v-if="zixunShow"
      :zykf_file_url="zykf1_file_url"
      @wtzxClose="wtzxClose"
    ></wtzxTc>
    <!-- 下载完成后未添加企业微信的弹窗 -->
      <downEvmTc
        v-if="downQwShow"
        :zykf_file_url="zykf_file_url"
        :xzMsg="xzMsg"
        @qwtcClose="qwtcClose"
      ></downEvmTc>
  </div>
</template>
<script>
import { timeStamp2String } from "../../utils/time";
import { list_kejian, url_kejian, info_kejian ,getgoodsbykejian,getkfinfobyip,qywx_status,getgmstatusbykejian,} from "../../api/http";
import fwbtj from "../../components/fwbtj/fubtj.vue";
import wtzxTc from "../../components/wtzxTc/wtzxtc.vue";
import downEvmTc from "../../components/zydownevm/zydownevm.vue";
export default {
  props: ["xitongMsg", "kefuMsg"],
  components: {
    fwbtj,
    wtzxTc,
    downEvmTc,
  },
  data() {
    return {
      type: 0, //根据资源页点击进来判断的课件类型
      timeStamp2String,
      kejianList: [], //课件列表
      page: 1, //页码
      page_size: 10, //分页大小
      currentPage: 1, //分页默认选中页
      counts: 0, //当前请求到的课件总条数用于分页显示总数

      choseN: 0, //点击选中的
      downN: [], //点击下载的

      nothingShow: false, //空数据
      yulanLists: [], //预览图列表
      dialogVisible: false, //预览显示
      yulanNothingShow: false, //空预览

      routeurl:'',//路径
      routeNmae:'',//路径名

      title:'',//课件类型

      fwbtjShow:false,//服务包推荐弹窗 付费的未购买时弹出
      zixunShow:false,//咨询客服1二维码弹窗
      zykf1_file_url:'',//资源客服1二维码
      choseGoodId:'',//服务包推荐弹窗选中的商品id
      goods_lists: [], //商品列表

      downQwShow: false,//下载完成弹窗展示隐藏
      zykf_file_url: "", //资源客服二维码
      xzMsg:{is_qw:'',type_id:'',baotype:'',kemu_id:'',nianji_id:'',},//下载完成弹窗所需相关
    };
  },
  created() {
    console.log(this.$route.query);
    this.xzMsg.kemu_id = this.$route.query.kemu_id;
    if(this.$route.query.path){
      localStorage.setItem('path',this.$route.query.path)
      this.routeNmae = this.$route.query.routeName
      this.routeurl = this.$route.query.path
      this.title = this.$route.query.title
    }
    this.type = this.$route.query.type;
    // if (this.$route.query.type != 4) {
      list_kejian({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.$route.query.kemu_id,
        nianji_ids: this.$route.query.nianji_id,
        kejianbooks_id: this.$route.query.kejianbooks_id,
        kejianchapters_id: this.$route.query.kejianchapters_id,
        from_int: 10,
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "asdas d");
          this.kejianList = res.retRes;
          this.counts = res.retCounts;
          console.log(this.kejianList, "ahaha");
          if (this.kejianList.length == 0) {
            this.nothingShow = true;
          } else {
            this.nothingShow = false;
          }
        }
      });
    // } else if (this.$route.query.type == 4) {
    //   list_kejian({
    //     md5key: localStorage.getItem("md5key"),
    //     kemu_id: this.$route.query.kemu_id,
    //     nianji_ids: this.$route.query.nianji_id,
    //     from_int: 10,
    //     type_id: 2,
    //     page: this.page,
    //     page_size: this.page_size,
    //   }).then((res) => {
    //     console.log(res);
    //     this.kejianList = res.retRes;
    //     this.counts = res.retCounts;
    //     if (this.kejianList.length == 0) {
    //       this.nothingShow = true;
    //     } else {
    //       this.nothingShow = false;
    //     }
    //   });
    // }
  },
  methods: {
    //关闭服务包推荐弹窗
    closefwbtj(){
      this.fwbtjShow = false
    },
    //去预约
    goyuyue(id,goodsweek_id){
      console.log(id,this.kemu_id)
      this.$router.push({
          name: "Dingzhi",
          query: {
            id: id,
            goodsweek_id:goodsweek_id,
            kemu_id:this.kemu_id,
            type:'dy',
            gopay:1,
          },
        });
    },
    //选择商品
    choseGood(id,goodsweek_id){
      this.choseGoodId = id
      console.log(goodsweek_id,"ceshiceshi ")
    },
    //点击商品咨询按钮
    zixun(){
      console.log(123)
      this.fwbtjShow = false
      getkfinfobyip({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        this.zykf1_file_url = res.retRes.local_zxkf_info.file_url
      });
      this.zixunShow = true
    },
    //关闭问题咨询添加客服1二维码弹窗
    wtzxClose(){
      console.log(123)
      this.zixunShow = false
      this.fwbtjShow = true
    },
    //点击列表
    choseList(id) {
      this.choseN = id;
    },
    //前往课件详情页
    goresDetails(id) {
      this.$router.push({
        path: "/resource/resDetails?id",
        query: {
          id: id,
          path:this.routeurl,
          routeName:this.routeNmae
        },
      });
    },
    //课件查看预览
    yulan(id) {
      this.dialogVisible = true;
      info_kejian({
        md5key: localStorage.getItem("md5key"),
        id: id,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "课件详情");
          this.yulanLists = res.retRes.file_lists;
          if (res.retRes.file_lists.length == 0) {
            this.yulanNothingShow = true;
          } else {
            this.yulanNothingShow = false;
          }
        }
      });
    },
    //下载课件
    //获取文件下载链接
    downLoad(id,is_sf,is_pay,type_id,item) {
      this.xzMsg.type_id = type_id;
      if(item.nianji_lists && item.nianji_lists.length == 1){
        this.xzMsg.nianji_id = item.nianji_id;
      }else{
        this.xzMsg.nianji_id = this.$route.query.nianji_id;
      }
      
      getgmstatusbykejian({
        md5key: localStorage.getItem("md5key"),
        type:1,
        id:id,
        goods_type:this.xzMsg.type_id == 1?3:this.xzMsg.type_id == 2?2:1,
        nianji_id:this.xzMsg.nianji_id
      }).then(res=>{
        console.log(res,"付费包支付状态")
        const bmsg = res.retRes;
        //如果是非课件试卷资源 且尊享包未购买全学年
        if(this.xzMsg.type_id != 1 && this.xzMsg.type_id != 2 && bmsg[0].is_pay == 0){
          this.xzMsg.baotype = 1;//推尊享包
        //如果是非课件试卷资源 且尊享包已购买全学年
        }else if(this.xzMsg.type_id != 1 && this.xzMsg.type_id != 2 && bmsg[0].is_pay == 1){
          this.xzMsg.baotype = 0;//推尊图书
        //如果是试卷资源 且试卷包未购买全学年
        }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 0){
          this.xzMsg.baotype = 2;//推尊图书
        //如果是试卷资源 且试卷包已购买全学年 且尊享包未购买全学年
        }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 0){
          this.xzMsg.baotype = 1;//推尊享包
        //如果是试卷资源 且试卷包已购买全学年 且尊享包已购买全学年
        }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 1){
          this.xzMsg.baotype = 0;//推尊图书
        //如果是课件资源 且课件包未购买全学年
        }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 0){
          this.xzMsg.baotype = 3;//推尊课件
        //如果是课件资源 且课件包已购买全学年 且尊享包未购买全学年
        }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 0){
          this.xzMsg.baotype = 1;//推尊享包
        //如果是课件资源 且课件包已购买全学年 且尊享包已购买全学年
        }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 1){
          this.xzMsg.baotype = 0;//推尊图书
        }
      })
      if(is_sf == 1 && is_pay == 0){
        getgoodsbykejian({
          md5key: localStorage.getItem("md5key"),
          type:1,
          id:id,
        }).then(res=>{
          console.log(res,"xin 商量列表")
          if (res.retRes.length != 0) {
            this.goods_lists = res.retRes;
            this.goods_id = res.retRes[0].goods_id;
            this.fwbtjShow = true
          }
        })
      }else{
        this.downN.push(id);
        url_kejian({
          md5key: localStorage.getItem("md5key"),
          id: id,
        }).then((res) => {
          console.log(res);
          if (res.retInt == 1) {
            let url = res.retRes.download_file_url;
            const a = document.createElement("a");
            a.href = url;
            a.download = res.retRes.title;
            a.style.display = "none";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            // getgoodsbykejian({
            //   md5key: localStorage.getItem("md5key"),
            //   type:1,
            //   id:id,
            // }).then(res=>{
            //   console.log(res,"xin 商量列表")
            //   if (res.retRes.length != 0) {
            //     this.xzMsg.baotype = res.retRes[0].type;
            //   }
            // })
            setTimeout(() => {
              qywx_status({
                md5key: localStorage.getItem("md5key"),
                // kf_account: this.kefuMsg.zykf_account,
              }).then((res) => {
                console.log(res);
                if (res.retRes.qywx_status == 0) {
                  this.xzMsg.is_qw = 0;
                  ffzyb_status({
                    md5key: localStorage.getItem("md5key"),
                  }).then((res) => {
                    if (res.retRes.is_dy == 1) {
                      //未订阅 资源客服2二维码
                      this.zykf_file_url = this.kefuMsg.zykf1_file_url;
                      this.downQwShow = true;
                    } else {
                      //已订阅 资源客服1二维码
                      this.zykf_file_url = this.kefuMsg.zykf_file_url;
                      this.downQwShow = true;
                    }
                  });
                }else{
                  this.xzMsg.is_qw = 1;
                  this.downQwShow = true;
                }
              });
            }, 1500);
          }
        });
      }
    },
    //关闭企业微信弹窗
    qwtcClose() {
      this.downQwShow = false;
    },
    //分页
    //调整每页条数
    handleSizeChange(val) {
      console.log("每页条数调整为", val);
      this.page_size = val;
      //切换每页展示课件列表条数后重新获取展示列表\
      list_kejian({
          md5key: localStorage.getItem("md5key"),
          kemu_id: this.$route.query.kemu_id,
          nianji_ids: this.$route.query.nianji_id,
          from_int: 10,
          kejianbooks_id: this.$route.query.kejianbooks_id,
          page: this.page,
          page_size: this.page_size,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res);
            this.kejianList = res.retRes;
            this.counts = res.retCounts;
          }
        });
      // if (this.type != 4) {
      //   list_kejian({
      //     md5key: localStorage.getItem("md5key"),
      //     kemu_id: this.$route.query.kemu_id,
      //     nianji_ids: this.$route.query.nianji_id,
      //     from_int: 10,
      //     kejianbooks_id: this.$route.query.kejianbooks_id,
      //     page: this.page,
      //     page_size: this.page_size,
      //   }).then((res) => {
      //     if (res.retInt == 1) {
      //       console.log(res);
      //       this.kejianList = res.retRes;
      //       this.counts = res.retCounts;
      //     }
      //   });
      // } else if (this.type == 4) {
      //   list_kejian({
      //     md5key: localStorage.getItem("md5key"),
      //     kemu_id: this.$route.query.kemu_id,
      //     nianji_ids: this.$route.query.nianji_id,
      //     from_int: 10,
      //     type_id: 2,
      //     page: this.page,
      //     page_size: this.page_size,
      //   }).then((res) => {
      //     console.log(res);
      //     this.kejianList = res.retRes;
      //     this.counts = res.retCounts;
      //   });
      // }
    },
    //跳转第几页
    handleCurrentChange(val) {
      console.log("当前页为第", val);
      this.page = val;
      //切换后台数据第几页课件列表后重新获取展示列表
      list_kejian({
          md5key: localStorage.getItem("md5key"),
          kemu_id: this.$route.query.kemu_id,
          nianji_ids: this.$route.query.nianji_id,
          from_int: 10,
          kejianbooks_id: this.$route.query.kejianbooks_id,
          page: this.page,
          page_size: this.page_size,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res);
            this.kejianList = res.retRes;
            this.counts = res.retCounts;
          }
        });
      // if (this.type != 4) {
      //   list_kejian({
      //     md5key: localStorage.getItem("md5key"),
      //     kemu_id: this.$route.query.kemu_id,
      //     nianji_ids: this.$route.query.nianji_id,
      //     from_int: 10,
      //     kejianbooks_id: this.$route.query.kejianbooks_id,
      //     page: this.page,
      //     page_size: this.page_size,
      //   }).then((res) => {
      //     if (res.retInt == 1) {
      //       console.log(res);
      //       this.kejianList = res.retRes;
      //       this.counts = res.retCounts;
      //     }
      //   });
      // } else if (this.type == 4) {
      //   list_kejian({
      //     md5key: localStorage.getItem("md5key"),
      //     kemu_id: this.$route.query.kemu_id,
      //     from_int: 10,
      //     nianji_ids: this.$route.query.nianji_id,
      //     type_id: 2,
      //     page: this.page,
      //     page_size: this.page_size,
      //   }).then((res) => {
      //     console.log(res);
      //     this.kejianList = res.retRes;
      //     this.counts = res.retCounts;
      //   });
      // }
    },
  },
};
</script>
<style>
.el-dialog__headerbtn {
  /* color: #08a579; */
  position: absolute;
  top: 20px;
  right: 40px;
  width: 0;
  height: 0;
}
.el-dialog__headerbtn .el-dialog__close:hover {
  color: #08a579;
}
</style>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
</style>
<style lang="less" scoped>
#container {
  .top {
    margin: 0 auto;
    width: 1200px;
    .bread {
      display: flex;
      margin: 20px auto;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #626366;
      line-height: 24px;
      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
          }
        }
      }
    }
  }
  .content {
    margin: 0 auto;
    width: 1200px;
    background: #ffffff;
    border: 1px solid #dee0e3;
    .top {
      display: flex;
      margin: 30px;
      span {
        position: relative;
        top: 3px;
        display: inline-block;
        margin-right: 7px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
    }
    .tableHeade {
      display: flex;
      align-items: center;
      margin: 0 auto;
      width: 1140px;
      height: 54px;
      background: #f0f2f5;
      border-radius: 4px;
      h3 {
        margin-left: 45px;
        text-align: left;
        color: #333333;
        font-size: 16px;
      }
      .paixu {
        margin-left: 20px;
        text-align: center;
        width: 120px;
      }
      .zyname {
        width: 390px;
      }
      .upTime {
        margin-left: 60px;
        width: 200px;
      }
      .doSome {
        width: 180px;
      }
    }
    .tableList {
      display: flex;
      align-items: center;
      margin: 0 auto;
      width: 1140px;
      height: 72px;
      background: #fff;
      border-radius: 4px;
      border-bottom: 1px solid #ebeef5;
      cursor: pointer;
      div {
        margin-left: 45px;
        text-align: left;
        color: #646566;
        font-size: 14px;
      }
      .paixu {
        margin-left: 20px;
        text-align: center;
        width: 120px;
      }
      .zyname {
        width: 390px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        img{
            width: 28px;
            position: relative;
            top: 4px;
          }
      }
      .zyname:hover {
        color: #08a579;
      }
      .upTime {
        margin-left: 60px;
        width: 200px;
      }
      .doSome {
        width: 180px;
        span {
          display: inline-block;
          margin-right: 30px;
          color: #08a579;
          cursor: pointer;
        }
        .haveDw {
          color: #969799;
        }
      }
    }
    .choseit {
      width: 1140px;
      height: 72px;
      background: #f9f9f9;
      border-radius: 4px;
      .zyname {
        color: #08a579;
      }
    }
  }
  //预览
  .yulan{
    /deep/.el-dialog {
    margin-top: 3vh !important;
    padding: 20px;
    border-radius: 14px;
    width: 880px !important;
  }
  /deep/.el-dialog__header {
    padding-top: 40px;
  }
  /deep/.el-dialog__body {
    padding: 0;
    .picList {
      height: 82vh;
      overflow-y: scroll;
      .pic {
        img {
          width: 810px;
        }
      }
    }
    ::-webkit-scrollbar {
      width: 7px;
    }
    ::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 5px;
    }
    ::-webkit-scrollbar-button {
      background-color: #eee;
      display: none;
    }
    ::-webkit-scrollbar-corner {
      background-color: black;
    }
  }
  }
  
  .nothing {
    margin: 100px;
    text-align: center;
  }

  .page1 {
    width: 800px;
    margin: 40px auto;
  }
  .el-pagination {
    text-align: center;
    margin: 20px 80px 20px 0;
  }
  /deep/.el-select .el-input.is-focus .el-input__inner {
    border-color: #08a579 !important;
  }
  /deep/.el-pagination .el-select .el-input .el-input__inner:hover {
    border-color: #08a579 !important;
  }
  /deep/.el-select .el-input__inner:focus {
    border-color: #08a579 !important;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #08a579;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    color: #fff;
  }
  /deep/.el-pager li:hover {
    color: #08a579;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    color: #fff !important;
  }
  .xztc{
    // /deep/
  }
}
</style>